<!--
 * hi-swiper-indicator - 轮播指示器
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-swiper-indicator" :class="_classes" :style="_styles">
        <!-- dots -->
        <view class="hi-swiper-indicator__dots" v-if="mode === 'dots'">
            <view
                class="hi-swiper-indicator__dots__item"
                v-for="_i in count"
                :key="_i"
                :class="{ 'hi-swiper-indicator__dots__item--active': _i === current + 1 }"
                :tap="_emits('itemClick', _i - 1)"
            ></view>
        </view>

        <!-- line -->
        <view class="hi-swiper-indicator__line" v-else-if="mode === 'line'">
            <view class="hi-swiper-indicator__line__bar" :style="_lineBarStyles"></view>
        </view>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { ref, computed } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["itemClick"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 模式
        classes.push(`hi-swiper-indicator--${_props.mode}`);

        // 指示器位置
        if (_props.position) classes.push(`hi-swiper-indicator--${_props.position}`);

        // 是否开启 absolut
        if (_props.absolute) classes.push("hi-swiper-indicator--absolute");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 数量
        styles.push(`--hi-swiper-indicator-count: ${_props.count};`);

        // 位置
        if (_props.top) styles.push(`--hi-swiper-indicator-top: ${_props.top};`);
        if (_props.right) styles.push(`--hi-swiper-indicator-right: ${_props.right};`);
        if (_props.bottom) styles.push(`--hi-swiper-indicator-bottom: ${_props.bottom};`);
        if (_props.left) styles.push(`--hi-swiper-indicator-left: ${_props.left};`);

        // 未激活时的颜色
        if (_props.inactiveColor) styles.push(`--hi-swiper-indicator-inactive-color: ${_props.inactiveColor};`);

        // 激活时的颜色
        if (_props.activeColor) styles.push(`--hi-swiper-indicator-active-color: ${_props.activeColor};`);

        // 圆角
        if (_props.radius) styles.push(`--hi-swiper-indicator-border-radius: ${_props.radius};`);

        // 间距
        if (_props.gap) styles.push(`--hi-swiper-indicator-gap: ${_props.gap};`);

        // 粗细
        if (_props.weight) styles.push(`--hi-swiper-indicator-weight: ${_props.weight};`);

        // 未激活时的大小
        if (_props.inactiveSize) styles.push(`--hi-swiper-indicator-inactive-size: ${_props.inactiveSize};`);

        // 激活时的大小
        if (_props.activeSize) styles.push(`--hi-swiper-indicator-active-size: ${_props.activeSize};`);

        // 线整体大小
        if (_props.lineSize) styles.push(`--hi-swiper-indicator-line-size: ${_props.lineSize};`);

        // 线 item 大小
        if (_props.lineItemSize) {
            styles.push(`--hi-swiper-indicator-line-item-size: ${_props.lineItemSize};`);
            styles.push(`--hi-swiper-indicator-line-size: calc(${_props.lineItemSize} * var(--hi-swiper-indicator-count));`);
        }

        return styles;
    });

    // line 指示器的 bar 样式
    const _lineBarStyles = computed(() => {
        const styles = [];

        // 大小
        styles.push(`--hi-swiper-indicator-line-bar-size: ${(1 / (_props.count || 1)) * 100}%`);

        // 位置
        styles.push(`--hi-swiper-indicator-line-bar-offset: ${(_props.current / (_props.count || 1)) * 100}%`);

        return styles;
    });
</script>

<style lang="scss" scoped>
    .hi-swiper-indicator {
        display: var(--hi-swiper-indicator-display, flex);
        align-items: var(--hi-swiper-indicator-align-items, center);
        justify-content: var(--hi-swiper-indicator-justify-content, center);
        position: var(--hi-swiper-indicator-position, relative);
        z-index: var(--hi-swiper-indicator-z-index, 10);
        bottom: var(--hi-swiper-indicator-bottom, auto);
        left: var(--hi-swiper-indicator-left, auto);
        right: var(--hi-swiper-indicator-right, auto);
        top: var(--hi-swiper-indicator-top, auto);
        transform: var(--hi-swiper-indicator-transform, initial);

        &__dots {
            display: var(--hi-swiper-indicator-dots-display, flex);
            align-items: var(--hi-swiper-indicator-dots-align-items, center);
            justify-content: var(--hi-swiper-indicator-dots-justify-content, center);
            gap: var(--hi-swiper-indicator-gap, 8px);
            flex-direction: var(--hi-swiper-indicator-dots-flex-direction, row);

            &__item {
                border-radius: var(--hi-swiper-indicator-border-radius, 3px);
                background: var(--hi-swiper-indicator-inactive-color, var(--hi-background-default));
                transition: var(--hi-swiper-indicator-transition, 500ms);

                &--active {
                    background: var(--hi-swiper-indicator-active-color, var(--hi-theme-primary));
                }
            }
        }

        &__line {
            border-radius: var(--hi-swiper-indicator-border-radius, 3px);
            background: var(--hi-swiper-indicator-inactive-color, var(--hi-background-default));
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;

            &__bar {
                position: absolute;
                border-radius: inherit;
                background: var(--hi-swiper-indicator-active-color, var(--hi-theme-primary));
                transition: var(--hi-swiper-indicator-transition, 500ms);
            }
        }

        &--bottom-center,
        &--bottom-left,
        &--bottom-right {
            .hi-swiper-indicator__dots {
                flex-direction: var(--hi-swiper-indicator-dots-flex-direction, row);

                &__item {
                    width: var(--hi-swiper-indicator-inactive-size, 8px);
                    height: var(--hi-swiper-indicator-weight, 3px);

                    &--active {
                        width: var(--hi-swiper-indicator-active-size, 16px);
                    }
                }
            }

            &.hi-swiper-indicator--line {
                width: var(--hi-swiper-indicator-line-size, 25%);
                height: var(--hi-swiper-indicator-weight, 3px);

                .hi-swiper-indicator__line__bar {
                    width: var(--hi-swiper-indicator-line-bar-size);
                    height: 100%;
                    top: 0;
                    left: var(--hi-swiper-indicator-line-bar-offset);
                }
            }
        }

        &--left-center,
        &--left-bottom,
        &--right-center,
        &--right-bottom {
            .hi-swiper-indicator__dots {
                flex-direction: var(--hi-swiper-indicator-dots-flex-direction, column);

                &__item {
                    width: var(--hi-swiper-indicator-inactive-size, 3px);
                    height: var(--hi-swiper-indicator-weight, 8px);

                    &--active {
                        height: var(--hi-swiper-indicator-active-size, 16px);
                    }
                }
            }

            &.hi-swiper-indicator--line {
                width: var(--hi-swiper-indicator-weight, 3px);
                height: var(--hi-swiper-indicator-line-size, 40%);

                .hi-swiper-indicator__line__bar {
                    width: 100%;
                    height: var(--hi-swiper-indicator-line-bar-size);
                    left: 0;
                    top: var(--hi-swiper-indicator-line-bar-offset);
                }
            }
        }

        &--absolute {
            position: var(--hi-swiper-indicator-position, absolute);

            &.hi-swiper-indicator--bottom-center {
                top: var(--hi-swiper-indicator-top, auto);
                bottom: var(--hi-swiper-indicator-bottom, 10px);
                left: var(--hi-swiper-indicator-left, 50%);
                right: var(--hi-swiper-indicator-right, auto);
                transform: var(--hi-swiper-indicator-transform, translate(-50%, 0));
            }

            &.hi-swiper-indicator--bottom-left {
                top: var(--hi-swiper-indicator-top, auto);
                bottom: var(--hi-swiper-indicator-bottom, 10px);
                left: var(--hi-swiper-indicator-left, 10px);
                right: var(--hi-swiper-indicator-right, auto);
                transform: var(--hi-swiper-indicator-transform, translate(0, 0));
            }

            &.hi-swiper-indicator--bottom-right {
                top: var(--hi-swiper-indicator-top, auto);
                bottom: var(--hi-swiper-indicator-bottom, 10px);
                left: var(--hi-swiper-indicator-left, auto);
                right: var(--hi-swiper-indicator-right, 10px);
                transform: var(--hi-swiper-indicator-transform, translate(0, 0));
            }

            &.hi-swiper-indicator--left-center {
                top: var(--hi-swiper-indicator-top, 50%);
                bottom: var(--hi-swiper-indicator-bottom, auto);
                left: var(--hi-swiper-indicator-left, 10px);
                right: var(--hi-swiper-indicator-right, auto);
                transform: var(--hi-swiper-indicator-transform, translate(0, -50%));
            }

            &.hi-swiper-indicator--left-bottom {
                top: var(--hi-swiper-indicator-top, auto);
                bottom: var(--hi-swiper-indicator-bottom, 10px);
                left: var(--hi-swiper-indicator-left, 10px);
                right: var(--hi-swiper-indicator-right, auto);
                transform: var(--hi-swiper-indicator-transform, translate(0, 0));
            }

            &.hi-swiper-indicator--right-center {
                top: var(--hi-swiper-indicator-top, 50%);
                bottom: var(--hi-swiper-indicator-bottom, auto);
                left: var(--hi-swiper-indicator-left, auto);
                right: var(--hi-swiper-indicator-right, 10px);
                transform: var(--hi-swiper-indicator-transform, translate(0, -50%));
            }

            &.hi-swiper-indicator--right-bottom {
                top: var(--hi-swiper-indicator-top, auto);
                bottom: var(--hi-swiper-indicator-bottom, 10px);
                left: var(--hi-swiper-indicator-left, auto);
                right: var(--hi-swiper-indicator-right, 10px);
                transform: var(--hi-swiper-indicator-transform, translate(0, 0));
            }
        }
    }
</style>
